<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GNB</title>

<!-- 
	[ step ]

	01. 1뎁스 기본 레이아웃.
	02. 2뎁스 기본 레이아웃.
	03. 1뎁스 인터렉티브 적용.
	04. step03 단계 코드 리펙토링.
	05. 1뎁스 인터렉티브 모션적용.
	06. 서브메뉴 이동.
	07. 서브아이템 인터렉션.
	08. 서브아이템 컨테이너 마스크.
-->

<style type="text/css">

	*{ padding: 0px; margin: 0px; }

	.depth1_container{
		background-color: #EEE;
		height: 50px;
	}

	.depth1_menu_item_list{
		list-style: none;
		height: 20px;
		overflow: hidden;
		top: 15px;
		position: relative;
	}

	.depth1_menu_item{
		display: inline-block;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 18px;
		position: relative;
	}

	.depth1_menu_item div{
		text-align: center;
	}

	.depth2_container{
		position: relative;
	}

	.depth2_menu_item_list{
		display: inline-block;
	}

	.depth2_menu_item{
		display: inline-block;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 11px;
	}

	.depth2_mask{
		overflow: hidden;
		position: relative;
		background-color: #DDDDDD;
	}

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript">
	$( document ).ready( function(){
		
		var j_gnb = $( ".gnb" );
		var j_depth1Container = $( ".depth1_container" );
		var j_depth1Items = $( ".depth1_menu_item" );
		var j_selectedItem;
		var j_overItem;
		var j_selectedSubItem;
		var j_overSubItem;
		var j_depth2Container = $( ".depth2_container" );
		var j_depth2List = $( ".depth2_menu_item_list" );
		var j_depth2Items = $( ".depth2_menu_item" );
		var j_depth2Mask = $( ".depth2_mask" );

		j_depth1Container.css( "width", j_depth1Container.width());
		j_depth2Container.css( "width", j_depth2Container.width());
		j_depth2Mask.css( "width", 0 );

		j_gnb.on( "mouseleave", function( event ){
			deactiveDepth1Item( j_overItem );
			deactiveDepth2Item( j_overSubItem );
			activeDepth1Item( j_selectedItem );
			activeDepth2Item( j_selectedSubItem );
		});

		j_depth1Items.on( "mouseenter", function( event ){
			var j_this = $( this );
			deactiveDepth1Item( j_overItem );
			deactiveDepth2Item( j_overSubItem );
			deactiveDepth1Item( j_selectedItem );
			activeDepth1Item( j_this );
			j_overItem = j_this;
		} );

		j_depth1Items.on( "click", function( event ){
			j_selectedItem = $( this );
		} );

		j_depth2Items.on( "mouseenter", function( event ){
			var j_this = $( this );
			deactiveDepth2Item( j_overSubItem );
			deactiveDepth2Item( j_selectedSubItem );
			activeDepth2Item( j_this );
			j_overSubItem = j_this;
		} );

		j_depth2Items.on( "click", function( event ){
			j_selectedItem = j_overItem;
			j_selectedSubItem = $( this );
		} );


		function activeDepth1Item( j_item ){
			if( !j_item ) return;
			j_item.stop();
			j_item.animate( {  top:-20 }, 100 );
			moveSubContainer( j_item );
		}

		function deactiveDepth1Item( j_item ){
			if( !j_item ) return;
			j_item.stop();
			j_item.animate( {  top:0 }, 100 );
		}

		function activeDepth2Item( j_item ){
			if( !j_item ) return;
			j_item.css( {color: "red"} );
		}

		function deactiveDepth2Item( j_item ){
			if( !j_item ) return;
			j_item.css( {color: "black"} );
		}

		function moveSubContainer( j_item ){

			var index = j_depth1Items.index( j_item );
			var j_targetList = j_depth2List.eq( index );
			if( !j_targetList[ 0 ] ) return;

			var targetX = j_targetList.position().left;
			var targetMaskX = j_item.position().left + parseInt( j_item.css( "padding-left") )
			j_depth2Container.animate( {  left:-targetX }, 100 );
			j_depth2Mask.animate( {  left:targetMaskX, width:j_targetList.outerWidth() }, 100 );
		}
	
	});
</script>

</head>
<body>
	<div class="gnb">
		<div class="depth1_container">
			<ul class="depth1_menu_item_list ">
					<li class="depth1_menu_item">
						<div>Info</div>
						<div>소개</div>
					</li>
					<li class="depth1_menu_item">
						<div>Communty</div>
						<div>커뮤니티</div>
					</li>
					<li class="depth1_menu_item">
						<div>Study</div>
						<div>스터디</div>
					</li>
					<li class="depth1_menu_item">
						<div>Store</div>
						<div>스토어</div>
					</li>
					<li class="depth1_menu_item">
						<div>Event</div>
						<div>이벤트</div>
					</li>
			</ui>
		</div>

		<div class="depth2_mask">
			<div class="depth2_container">
				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Hello Webdongne</li>
						<li class="depth2_menu_item">Contact Us</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Free Board</li>
						<li class="depth2_menu_item">Forum</li>
						<li class="depth2_menu_item">Issue</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">HTML/CSS</li>
						<li class="depth2_menu_item">Java Script</li>
						<li class="depth2_menu_item">JQuery</li>
						<li class="depth2_menu_item">Edge</li>
						<li class="depth2_menu_item">Node JS</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Web Contents</li>
						<li class="depth2_menu_item">E-Book</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>